<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="color:red;font-size:50px;">这是一段文本</p>
    <style type="text/css">
        p {
        color: blue;
        font-size: 40px;
        }
        </style>
        <p>这是一段文本</p>
        <link rel="stylesheet" type="text/css" href="style.css">
        <!-- @charset "utf-8";
p {
color: green;
font-size: 30px;
} -->
<b>这个元素隐含加粗样式</b>
<span style="font-weight:bold;">这个元素通过 style 加粗</span>
<p style="color:red;font-size:30px;">我将被三种方式叠加样式</p>
<style type="text/css">
    p {
    color:blue;
    font-weight: bold;
    }
    </style>
    <!-- @charset "utf-8";
    p {
    color: green;
    font-style: italic;
    } -->
    <!-- color: green !important; -->
    <p style="color:red;">这是<b>HTML5</b></p>
    <p>这是<b>HTML5</b></p>
<style type="text/css">
p {
border: 1px solid red;
}b {
border : inherit;
}
</style>
</body>
</html>